//GENERAL_OPTIONS
//GENERAL HELPERS
(function (that) {

	var that = that || this;

	var options = {
		browser_sizes: [
			[1366,768],
			[1280,800],
			[1024,768],
			[1280,1024],
			[1920,1080],
			[1440,900],
			[1680,1050],
			[1600,900],
			[1024,600],
			[1152,864],
			[1920,1200],
			[1280,720],
			[320,480],
			[1280,768],
			[1360,768],
			[1280,960],
			[800,600],
			[1680,945],
			[1400,1050],
			[768,1024]
		],
		container: "canv",
		length_distance: [10,5],
		stroke_style: 'black',
		line_width: 3
				
	};


	//if horizontal true, draw horizontal line else draw vertical line
	var draw_line = function(to_point, offset, context, horizontal){

		context.save();

		var from_x = horizontal ? 0 : offset
		, from_y = horizontal ? offset : 0
		, len_dis = options.length_distance
		, skip = 0
		, dist_remain = to_point
		, draw_length, new_x, new_y;

		context.translate(from_x, from_y);
		
		var dashIndex=0, draw=true;
		while (dist_remain > 0){
			draw_length = len_dis[skip];
						
			if (draw_length > dist_remain){draw_length = dist_remain};

			new_x = horizontal ? draw_length : 0;
			new_y = horizontal ? 0 : draw_length;
			
			if(!skip){				
				context.lineTo(new_x, new_y);
			}else{								
				context.moveTo(new_x, new_y);
			}

			context.translate(new_x, new_y);
						
			skip ^= 1;
			dist_remain -= draw_length;
			
		}		

		context.restore();
	}

	
	that.heatmap_browsersize = function(){
		canvas = document.createElement("canvas");		
		canvas.height = 2000;
		canvas.width = 2000;
		document.getElementById(options.container).appendChild(canvas);

		context = canvas.getContext("2d");
		
		context.strokeStyle = options.stroke_style;
		context.lineWidth   = options.line_width;

		for(var i=0,bs = options.browser_sizes, len=bs.length; i < len; i++){

			//draw horizontal line
			context.beginPath();
			draw_line(bs[i][0],bs[i][1],context,true);			
			context.closePath();
			context.stroke();

			//draw vertical line
			context.beginPath();
			draw_line(bs[i][1],bs[i][0],context,false);
			context.closePath();
			context.stroke();
		}
		


	};

})(sauberfant);
